<ion-header>

  <ion-toolbar>
    <ion-title>Item Media</ion-title>
  </ion-toolbar>

</ion-header>


<ion-content>

  <button ion-item>
    <ion-avatar item-start>
      <img src="">
    </ion-avatar>
    Media/Avatar left, button.item
  </button>

  <a ion-item href="#">
    Media/Avatar right, a.item
    <ion-avatar item-end>
      <img src="">
    </ion-avatar>
  </a>

  <ion-item>
    <ion-avatar item-start>
      <img src="">
    </ion-avatar>
    Media/Avatar, right button
    <button ion-button outline item-end>View</button>
  </ion-item>

  <a ion-item href="#">
    <ion-avatar item-start>
      <img src="">
    </ion-avatar>
    <h2>H2 Title Text</h2>
    <p>Paragraph text</p>
  </a>

  <a ion-item href="#">
    Media/Thumbnail right side, a.item
    <ion-thumbnail item-end>
      <img src="">
    </ion-thumbnail>
  </a>

  <ion-item>
    <ion-thumbnail item-start>
      <img src="">
    </ion-thumbnail>
    <h2>H2 Title Text</h2>
    <p>Button on right</p>
    <button ion-button outline item-end>View</button>
  </ion-item>

  <button ion-item>
    <ion-thumbnail item-start>
      <img src="">
    </ion-thumbnail>
    <h3>H3 Title Text</h3>
    <p>Icon on right</p>
    <p>Vertically align top</p>
    <p>button.item</p>
    <ion-icon name="close-circle" item-end></ion-icon>
  </button>

</ion-content>


<style>
  img {
    height: 100px;
  }
</style>